<template>
  <div class="review-task-scheduling">
 
    <el-card class="review-card">
      <template #header>
        <div class="card-header">
          <h2>评阅任务调度</h2>
          <div class="filter-container">
            <el-select v-model="timeOrder" placeholder="时间排序" class="filter-item">
              <el-option label="时间降序" value="desc" />
              <el-option label="时间升序" value="asc" />
            </el-select>
            <el-select v-model="reviewStatus" placeholder="批阅状态" class="filter-item">
              <el-option label="所有状态" value="所有状态" />
              <el-option label="待分配" value="待分配" />
              <el-option label="批阅中" value="批阅中" />
              <el-option label="已批阅" value="已批阅" />
            </el-select>
           
           
            <rip-button style="width: 70px;height: 33px;" @click="handleReset">重置</rip-button>
            


            <el-button type="primary" @click="handleQuery" class="filter-button">查询</el-button>
          </div>
        </div>
      </template>
      
      <!-- 已结束考试列表 -->
      <el-table
        :data="paginatedData"
        style="width: 100%"
        border
        v-loading="loading"
        :header-cell-style="{ 'background-color': '#f5f7fa' }"
        :row-class-name="tableRowClassName"
        class="exam-table"
      >
        <el-table-column 
          prop="name" 
          label="考试名称" 
          min-width="180"
          :show-overflow-tooltip="true"
        />
        <el-table-column 
          prop="startTime" 
          label="开始时间" 
          min-width="160"
          :formatter="dateTimeFormatter" 
        />
        <el-table-column 
          prop="endTime" 
          label="结束时间" 
          min-width="160"
          :formatter="dateTimeFormatter" 
        />
        <el-table-column 
          prop="examinationStatus" 
          label="批阅状态" 
          min-width="100"
        >
          <template #default="scope">
            <el-tag 
              :type="getStatusType(scope.row.examinationStatus)"
            >
              {{ scope.row.examinationStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column 
          label="操作" 
          min-width="120"
          fixed="right"
        >
          <template #default="scope">
            <!-- 待分配状态显示批阅设置按钮 -->
            <el-button 
              v-if="scope.row.examinationStatus === '待分配'"
              type="primary" 
              @click="handleReviewSetting(scope.row)"
              size="small"
            >批阅设置</el-button>
            
            <!-- 批阅中状态显示查看进度按钮 -->
            <el-button
              v-else-if="scope.row.examinationStatus === '批阅中'"
              type="warning"
              @click="handleReviewProgress(scope.row)"
              size="small"
            >查看进度</el-button>
            
            <!-- 已批阅状态显示查看详情按钮 -->
            <el-button
              v-else-if="scope.row.examinationStatus === '已批阅'"
              type="success"
              @click="handleReviewQuery(scope.row)"
              size="small"
            >查看详情</el-button>

            <el-button
              type="info"
              size="small"
              @click="openSetting(scope.row)"
            >设置</el-button> 
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页控件 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        />
      </div>
    </el-card>
    
    <!-- 批阅设置对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="批阅设置"
      width="80%"
      destroy-on-close
      :close-on-click-modal="false"
      class="review-dialog"
    >
      <div class="dialog-content">
        <el-tabs v-model="activeTab" class="review-tabs">
          <el-tab-pane label="批阅人员设置" name="reviewers">
            <div class="reviewers-container">
              <!-- 添加错误提示 -->
              <el-alert
                v-if="assignedReviewers.length === 0 && showValidationAlert"
                title="请添加至少一名批阅人员"
                type="warning"
                description="您需要从左侧教师列表中选择批阅人员"
                show-icon
                :closable="true"
                @close="showValidationAlert = false"
                style="margin-bottom: 20px; width: 100%;"
              />
              
              <div class="reviewer-selection">
                <h3>可选教师列表</h3>
                <div class="select-teachers">
                
                  <el-table
                    :data="filteredTeachers"
                    height="300"
                    border
                    @selection-change="handleSelectionChange"
                    class="teachers-table"
                  >
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="account" label="教师工号" width="120" />
                    <el-table-column prop="name" label="教师姓名" min-width="120" />
                  </el-table>
                </div>
              </div>
              
              <div class="reviewer-actions">
                <el-button 
                  type="primary" 
                  @click="addSelectedTeachers" 
                  :disabled="selectedTeachers.length === 0"
                  class="action-button"
                  circle
                  :title="'添加选中教师'"
                >
                  <el-icon><el-icon-arrow-right /></el-icon>
                </el-button>
                <el-button 
                  type="danger" 
                  @click="removeSelectedReviewers"
                  :disabled="selectedReviewers.length === 0"
                  class="action-button"
                  circle
                  :title="'移除选中教师'"
                >
                  <el-icon><el-icon-arrow-left /></el-icon>
                </el-button>
              </div>
              
              <div class="selected-reviewers">
                <h3>已选批阅人员</h3>
                <el-table
                  :data="assignedReviewers"
                  height="300"
                  border
                  @selection-change="handleReviewerSelectionChange"
                  class="reviewers-table"
                >
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="account" label="教师工号" width="120" />
                  <el-table-column prop="name" label="教师姓名" min-width="120" />
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="任务分配" name="assignment">
            <div class="task-assignment">
              <div class="card assignment-card">
                <div class="card-header">
                  <h4>批阅任务分配方式</h4>
                </div>
                <div class="card-content">
                  <el-form :model="assignmentForm" label-width="0" class="assignment-form">
                    <div class="strategy-selection">
                      <div class="section-title">分配策略：</div>
                      <el-radio-group v-model="assignmentForm.strategy" class="strategy-options">
                        <el-radio-button value="1">整张试卷(随机)</el-radio-button>
                        <el-radio-button value="2">单道大题(随机)</el-radio-button>
                  </el-radio-group>
                    </div>
                    
                    <div class="strategy-description">
                      <el-alert
                        :title="getStrategyDescription(assignmentForm.strategy)"
                        :type="assignmentForm.strategy === '1' ? 'info' : 'warning'"
                        :closable="false"
                        class="strategy-alert"
                      />
                    </div>
                    
       
              </el-form>
                </div>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="时限设置" name="timeSettings">
            <div class="time-settings">
              <div class="card time-settings-card">
                <div class="card-header">
                  <h4>批阅时间限制</h4>
                </div>
                <div class="card-content">
                  <el-form :model="timeSettingsForm" label-position="left" :label-width="formLabelWidth" class="time-form">
                    <el-form-item 
                      label="批阅开始时间："
                      :rules="[{ required: true, message: '请选择批阅开始时间', trigger: 'change' }]"
                      class="inline-form-item"
                    >
                  <el-date-picker
                    v-model="timeSettingsForm.startTime"
                    type="datetime"
                    placeholder="选择批阅开始时间"
                    format="YYYY-MM-DD HH:mm"
                        :disabled-date="disabledStartDate"
                        :disabled-time="disabledStartTime"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        @change="handleStartTimeChange"
                  />
                      <div class="form-tip">批阅开始时间不能早于当前时间</div>
                </el-form-item>
                
                    <el-form-item 
                      label="批阅截止时间："
                      :rules="[{ required: true, message: '请选择批阅截止时间', trigger: 'change' }]"
                      class="inline-form-item"
                    >
                  <el-date-picker
                    v-model="timeSettingsForm.endTime"
                    type="datetime"
                    placeholder="选择批阅截止时间"
                    format="YYYY-MM-DD HH:mm"
                        :disabled-date="disabledEndDate"
                        :disabled-time="disabledEndTime"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        @change="validateTimeRange"
                  />
                      <div class="form-tip">批阅截止时间必须晚于批阅开始时间</div>
                </el-form-item>
                
                    <div class="time-range-info" v-if="timeSettingsForm.startTime && timeSettingsForm.endTime">
                      <el-alert
                        :title="getTimeRangeInfo()"
                        type="info"
                        :closable="false"
                      />
                    </div>
                    
                    <el-form-item label="到期提醒：" class="inline-form-item">
                  <el-switch
                    v-model="timeSettingsForm.enableReminder"
                    active-text="启用"
                    inactive-text="禁用"
                    @change="validateReminderTime"
                  />
                </el-form-item>
                
                <el-form-item 
                  label="提前提醒时间："
                  v-if="timeSettingsForm.enableReminder"
                      class="inline-form-item"
                    >
                      <el-select 
                        v-model="timeSettingsForm.reminderTime" 
                        @change="validateReminderTime"
                      >
                        <el-option 
                          v-for="option in availableReminderTimes" 
                          :key="option.value" 
                          :label="option.label" 
                          :value="option.value" 
                          :disabled="option.disabled"
                        />
                  </el-select>
                      <div class="form-tip">提醒时间必须在批阅时间范围内</div>
                </el-form-item>
              </el-form>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="validateBeforeSave">保存设置</el-button>
        </div>
      </template>
    </el-dialog>
    
    <!-- 查看批阅详情对话框 -->
    <el-dialog
      v-model="queryDialogVisible"
      title="批阅详情"
      width="60%"
      destroy-on-close
      class="query-dialog"
    >
      <div v-if="currentExam" class="query-info">
        <h3>{{ currentExam.name }} - 批阅人员名单</h3>
        <h4 style="margin-bottom: 20px;">
          分配策略: {{ reviewDetailResult.assignmentStrategy === 1 ? '整张试卷' : '单道大题' }}
        </h4>
        <el-table
          :data="reviewDetailResult.list"
          style="width: 100%"
          border
          :header-cell-style="{ 'background-color': '#f5f7fa' }"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column
            prop="teacherAccount"
            label="教师工号"
            width="120"
            align="center"
          />
          <el-table-column
            prop="teacherName"
            label="教师姓名"
            min-width="150"
            align="center"
          />
          <el-table-column
            prop="total"
            min-width="150"
            align="center"
            :label="`分配的总数(${reviewDetailResult.assignmentStrategy === 1 ? '份' : '道'})`"
          />


          <el-table-column
            prop="doneTotal"
            label="已批阅数量"
            width="120"
            align="center"
          />
        </el-table>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="queryDialogVisible = false">关闭</el-button>
  </div>
</template>
    </el-dialog>
    
    <!-- 查看批阅进度对话框 -->
    <el-dialog
      v-model="progressDialogVisible"
      title="批阅进度查询"
      width="70%"
      destroy-on-close
      class="progress-dialog"
    >
      <div v-if="reviewersProgress" class="progress-info">
        <div class="exam-title">
          <h3>{{ reviewersProgress.exam.name }}</h3>
          <div class="exam-details">
            <span>考试时间: {{ formatDateTime(reviewersProgress.exam.startTime) }} 至 {{ formatDateTime(reviewersProgress.exam.endTime) }}</span>
            <span>分配策略: {{ reviewersProgress.assignmentStrategy === 1 ? '整张试卷' : '单道大题' }}</span>
            <span>批阅状态: 
              <el-tag v-if="reviewersProgress.exam.examinationStatus === '未批阅'" type="danger" size="small">未批阅</el-tag>
              <el-tag v-else-if="reviewersProgress.exam.examinationStatus === '批阅中'" type="warning" size="small">批阅中</el-tag>
              <el-tag v-else-if="reviewersProgress.exam.examinationStatus === '已批阅'" type="success" size="small">已批阅</el-tag>
            </span>
            
          </div>
        </div>
        
        <div class="progress-overview">
          <div class="card overall-progress">
            <div class="card-header">
              <h4>总体批阅进度</h4>
            </div>
            <div class="card-content">
              <div class="progress-percentage">{{ getOverallPercentage() }}%</div>
              <el-progress 
                :percentage="getOverallPercentage()" 
                :status="getOverallStatus()"
                :stroke-width="20"
                :format="() => ''"
              />
              <div class="progress-summary">
                <div class="summary-item">
                  <div class="item-value">{{reviewersProgress.total }}</div>
                  <div class="item-label">总量{{ reviewersProgress.assignmentStrategy === 1 ? '/份' : '/道' }}</div>
                </div>
                <div class="divider"></div>
                <div class="summary-item">
                  <div class="item-value">{{ reviewersProgress.doneTotal }}</div>
                  <div class="item-label">已批阅</div>
                </div>
                <div class="divider"></div>
                <div class="summary-item">
                  <div class="item-value">{{ reviewersProgress.total - reviewersProgress.doneTotal }}</div>
                  <div class="item-label">剩余{{ reviewersProgress.assignmentStrategy === 1 ? '/份' : '/道' }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="card reviewer-progress">
          <div class="card-header">
            <h4>教师批阅详情</h4>
           
          </div>
          <div class="card-content">
            <el-table
              :data="reviewersProgress.list"
              style="width: 100%"
              border
              :header-cell-style="{ 'background-color': '#f5f7fa', 'font-weight': 'bold' }"
            >
              <el-table-column
                type="index"
                label="序号"
                width="70"
                align="center"
              />
              <el-table-column
                prop="teacherAccount"
                label="教师工号"
                width="110"
                align="center"
              />
              <el-table-column
                prop="teacherName"
                label="教师姓名"
                min-width="120"
              />
              <el-table-column
                v-if="reviewersProgress.assignmentStrategy === 2"
                prop="totalComplexity"
                label="总难度系数"
                min-width="120"
                align="center"
              />
              <el-table-column
                label="批阅进度"
                min-width="260"
                align="center"
              >
                <template #default="scope">
                  <div class="progress-wrapper">
                    <div class="progress-numbers">
                      <span class="completed">{{ scope.row.doneCount }}</span>
                      <span class="separator">/</span>
                      <span class="total">{{ scope.row.detailCount }} {{ reviewersProgress.assignmentStrategy === 1 ? '份' : '道' }}</span>
                    </div>
                    <el-progress 
                      style="position: relative; left: 20px;"
                      :percentage="getProgressPercentage(scope.row)" 
                      :status="getProgressStatus(scope.row)"
                      :stroke-width="15"
                      :format="() => ''"
                    />
                    <div class="progress-text">
                      <span style="position: relative; left: 20px;">{{ getCompletionRate(scope.row) }}</span>
                      <span class="progress-status" :class="getProgressStatusClass(scope.row)">
                        {{ getProgressStatusText(scope.row) }}
                      </span>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                :label="reviewersProgress.assignmentStrategy === 1 ? '剩余(份)' : '剩余(道)'"
                width="110"
                align="center"
              >
                <template #default="scope">
                  <span class="remaining-papers" :class="{'warning': (scope.row.detailCount - scope.row.doneCount) > 10}">
                    {{ scope.row.detailCount - scope.row.doneCount }}
                  </span>
                </template>
              </el-table-column>
             
            </el-table>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="refreshProgress" type="primary" plain><el-icon class="refresh-icon"><Refresh /></el-icon>刷新数据</el-button>
          <el-button @click="progressDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 设置参考答案 -->
    <el-dialog
      v-model="settingDialogVisible"
      title="设置参考答案"
      width="60%"
      :close-on-click-modal="false"
      class="reference-answer-dialog"
    >
      <div class="reference-answer-container">
        <div v-for="subject in subjects" :key="subject.id" class="subject-item">
          <div class="subject-header">
            <div class="subject-title">
              <span class="subject-order">{{ subject.questionOrder }}</span>
              <span class="subject-name">{{ subject.questionName }}</span>
            </div>
          </div>
          
          <div class="subject-content">
            <p>{{ subject.questionContent }}</p>
          </div>
          
          <div class="reference-section">
            <div class="section-title">参考答案</div>
            <div class="section-content">{{ subject.referenceAnswer }}</div>
          </div>
          
          <div class="grading-section">
            <div class="section-title">
              评分细则
              <span class="section-tip">每一个评分标准之间请使用"|"隔开</span>
            </div>
            <div class="section-input">
              <el-input
                v-model="subject.gradingRules"
                type="textarea"
                :rows="3"
                placeholder="请输入评分细则"
                resize="none"
              />
            </div>
          </div>
          
          <div class="action-section">
            <el-button type="success" plain @click="saveSubjectOfHook(subject)" class="save-button">
              <el-icon><Check /></el-icon>
              保存
            </el-button>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="settingDialogVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
    
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { Search as ElIconSearch, Refresh, Check } from '@element-plus/icons-vue'
import { ArrowRight as ElIconArrowRight, ArrowLeft as ElIconArrowLeft } from '@element-plus/icons-vue'
import useReviewTaskQuery from '@/hooks/server/useReviewTaskQuery'
import useReviewSetting from '@/hooks/server/useReviewSetting'




// 使用评阅任务查询Hook
const {
  loading,
  examList,
  timeOrder,
  reviewStatus,
  currentPage,
  pageSize,
  total,
  fetchExams,
  handleQuery,
  handleReset,
  handleSizeChange,
  handleCurrentChange,
  formatDateTime,
  tableRowClassName
} = useReviewTaskQuery()

// 日期时间格式化处理器
const dateTimeFormatter = (row, column, cellValue) => formatDateTime(cellValue)

// 使用批阅设置Hook
const {
  dialogVisible,
  activeTab,
  currentExam,
  selectedTeachers,
  assignedReviewers,
  selectedReviewers,
  assignmentForm,
  timeSettingsForm,
  filteredTeachers,
  openReviewSetting,
  handleSelectionChange,
  handleReviewerSelectionChange,
  addSelectedTeachers,
  removeSelectedReviewers,
  saveSettings,
  queryDialogVisible,
  reviewDetailResult,
  openReviewQuery,
  getStatusType,
  progressDialogVisible,
  handleReviewProgress,
  getProgressPercentage,
  getProgressStatus,
  getCompletionRate,
  getOverallPercentage,
  getOverallStatus,
  getProgressStatusClass,
  getProgressStatusText,
  refreshProgress,
  getStrategyDescription,
  disabledStartDate,
  disabledStartTime,
  disabledEndDate,
  disabledEndTime,
  handleStartTimeChange,
  validateTimeRange,
  validateReminderTime,
  getTimeRangeInfo,
  availableReminderTimes,
  reviewersProgress,

  // 获取本场考试涉及的所有主观题
  subjects,
  openSetting,
  settingDialogVisible,

  // 保存主观题参考答案
  saveSubjectOfHook,
} = useReviewSetting({ examList })

// 表单标签宽度 
const formLabelWidth = '110px'

// 分页后的数据
const paginatedData = computed(() => {
  return examList.value
})

// 初始化数据
onMounted(async () => {
  await fetchExams()
})

// 批阅设置
const handleReviewSetting = (row) => {
  showValidationAlert.value = false; // 重置验证提示状态
  openReviewSetting(row)
}

// 批阅查询
const handleReviewQuery = (row) => {
  openReviewQuery(row)
}

// 控制验证提示的显示
const showValidationAlert = ref(false);

// 验证后保存
const validateBeforeSave = () => {
  if (assignedReviewers.value.length === 0) {
    showValidationAlert.value = true;
    activeTab.value = 'reviewers';
    return;
  }
  
  // 如果验证通过，调用保存方法
  handleSaveSettings();
};

// 保存批阅设置
const handleSaveSettings = async () => {
  const saved = await saveSettings();
  if (saved) {
    // 保存成功，可以执行其他操作
    await fetchExams(); // 刷新考试列表
  }
}
</script>

<style scoped lang="scss">
.review-task-scheduling {
  padding: 20px;
  
  .review-card {
    margin-bottom: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px;
      
      h2 {
        margin: 0;
        font-size: 1.5rem;
      }
      
      .filter-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        
        .filter-item {
          width: 150px;
        }
        
        .filter-button {
          margin-left: 5px;
        }
      }
    }
    
    .exam-table {
      margin-top: 20px;
    }
    
    .pagination-container {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
  
  .review-dialog, .query-dialog, .progress-dialog {
    .dialog-content {
      padding: 0 20px;
    }
    
    .review-tabs {
      margin-bottom: 20px;
    }
    
    .reviewers-container {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      
      .reviewer-selection, .selected-reviewers {
        flex: 1;
        min-width: 300px;
        
        h3 {
          margin-bottom: 15px;
        }
        
        .search-teacher {
          margin-bottom: 15px;
        }
      }
      
      .reviewer-actions {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        padding: 0 15px;
        
        .action-button {
          width: 50px;
          height: 50px;
          font-size: 18px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          transition: all 0.3s;
          
          &:hover:not(:disabled) {
            transform: scale(1.05);
          }
          
          &:disabled {
            opacity: 0.6;
          }
        }
      }
    }
    
    .task-assignment {
      .card {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        overflow: hidden;
        
        .card-header {
          padding: 15px 20px;
          border-bottom: 1px solid #ebeef5;
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          h4 {
            margin: 0;
            font-size: 1.1rem;
            color: #303133;
          }
        }
        
        .card-content {
          padding: 20px;
        }
      }
      
      .assignment-card {
        max-width: 800px;
        margin: 0 auto;
        
        .assignment-form {
          width: 100%;
          max-width: 100%;
          margin: 0;
          
          .strategy-selection {
            display: flex;
            flex-direction: column;
            margin-bottom: 25px;
            
            .section-title {
              margin-bottom: 15px;
              font-size: 1rem;
              font-weight: 600;
              color: #303133;
            }
            
            .strategy-options {
              margin-bottom: 15px;
              
              .el-radio-button {
                margin-right: 10px;
              }
            }
          }
          
          .strategy-description {
            margin-bottom: 20px;
            
            .strategy-alert {
              padding: 10px 15px;
              border-radius: 4px;
            }
          }
          
          .section-divider {
            height: 1px;
            background-color: #ebeef5;
            margin: 25px 0;
          }
          
          .distribution-summary {
            margin-bottom: 20px;
            
            .summary-title {
              margin-bottom: 15px;
              font-size: 1rem;
              font-weight: 600;
              color: #303133;
            }
            
            .summary-info {
              margin-bottom: 20px;
              
              .highlight {
                color: #409EFF;
                font-weight: 600;
                font-size: 1.1rem;
              }
            }
            
            .distribution-details {
              margin-top: 25px;
              margin-bottom: 20px;
              
              .details-title {
                margin-bottom: 15px;
                font-size: 0.95rem;
                font-weight: 500;
                color: #606266;
              }
            }
            
            .no-reviewers {
              padding: 20px 0;
              margin-bottom: 20px;
            }
            
            .assignment-message {
              margin-top: 25px;
              margin-bottom: 20px;
      
      .assignment-alert {
                .el-alert__title {
                  font-size: 0.95rem;
                }
              }
            }
          }
        }
      }
    }
    
    .time-settings {
      margin-top: 20px;

      .time-settings-card {
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
        margin-bottom: 20px;
        
        .card-header {
          padding: 15px 20px;
          border-bottom: 1px solid #f0f0f0;
          
          h4 {
            margin: 0;
            font-size: 16px;
            color: #303133;
          }
        }
        
        .card-content {
          padding: 20px;
        }
      }

      .time-form {
        max-width: 520px;
        
        .inline-form-item {
          :deep(.el-form-item__label) {
            white-space: nowrap;
            display: inline-block;
            text-align: right;
            padding-right: 5px;
            overflow: visible;
            font-size: 14px;
          }
          
          :deep(.el-form-item__content) {
            margin-left: 10px !important;
            display: block;
          }
        }
        
        .form-tip {
          font-size: 12px;
          color: #909399;
          margin-top: 5px;
          line-height: 1.2;
        }
        
        .time-range-info {
          margin: 15px 0;
          
          .el-alert {
            padding: 10px 15px;
            
            .el-alert__title {
              font-size: 14px;
              color: #1989fa;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
  
  .query-dialog {
    .query-info {
      padding: 0 20px;
      
      h3 {
        margin-bottom: 20px;
        text-align: center;
        font-size: 1.3rem;
        color: #303133;
      }
    }
  }
  
  .progress-dialog {
    .progress-info {
      padding: 0 20px;
      
      .exam-title {
        margin-bottom: 20px;
        
        h3 {
          margin-top: 0;
          margin-bottom: 10px;
          font-size: 1.3rem;
          color: #303133;
        }
        
        .exam-details {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 0.9rem;
          color: #606266;
        }
      }
      
      .card {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        overflow: hidden;
        
        .card-header {
          padding: 15px 20px;
          border-bottom: 1px solid #ebeef5;
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          h4 {
            margin: 0;
            font-size: 1.1rem;
            color: #303133;
          }
          
          .search-wrapper {
            width: 250px;
          }
        }
        
        .card-content {
          padding: 20px;
        }
      }
      
      .progress-overview {
        margin-bottom: 20px;
        
        .card.overall-progress {
          .card-content {
            .progress-percentage {
              margin-bottom: 10px;
              font-weight: 600;
              font-size: 2rem;
              color: #409EFF;
              text-align: center;
            }
            
            .progress-summary {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 20px;
              padding: 10px 0;
              
              .summary-item {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                
                .item-value {
                  font-weight: 600;
                  font-size: 1.5rem;
                  color: #303133;
                  margin-bottom: 5px;
                }
                
                .item-label {
                  font-size: 0.9rem;
                  color: #606266;
                }
              }
              
              .divider {
                width: 1px;
                height: 40px;
                background-color: #ebeef5;
              }
            }
          }
        }
      }
      
      .card.reviewer-progress {
        .card-content {
          padding: 15px 20px;
          
          .progress-wrapper {
            display: flex;
            flex-direction: column;
          
            
            .progress-numbers {
              display: flex;
              justify-content: center;
              align-items: center;
              margin-bottom: 5px;
              
              .completed {
                font-weight: 600;
                color: #67C23A;
              }
              
              .separator {
                margin: 0 5px;
                color: #909399;
              }
              
              .total {
                font-weight: 500;
                color: #303133;
              }
            }
            
            .progress-text {
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 0.9rem;
              margin-top: 5px;
             
              .progress-status {
                font-weight: 500;
                
                &.excellent {
                  color: #67C23A;
                }
                
                &.good {
                  color: #E6A23C;
                }
                
                &.slow {
                  color: #F56C6C;
                }
              }
            }
          }
          
          .remaining-papers {
            font-weight: 500;
            
            &.warning {
              color: #F56C6C;
            }
          }
        }
      }
    }
    
    .dialog-footer {
      .refresh-icon {
        margin-right: 5px;
      }
    }
  }
}

// 响应式样式
@media screen and (max-width: 1200px) {
  .review-task-scheduling {
    .reviewers-container {
      flex-direction: column;
      
      .reviewer-actions {
        flex-direction: row;
        justify-content: center;
        padding: 15px 0;
      }
    }
    
    .progress-dialog {
      .progress-info {
        .exam-title {
          .exam-details {
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .review-task-scheduling {
    padding: 10px;
    
    .card-header {
      flex-direction: column;
      align-items: flex-start;
      
      .filter-container {
        width: 100%;
        justify-content: space-between;
        
        .filter-item {
          width: 48%;
        }
        
        .filter-button {
          margin-top: 10px;
          width: 48%;
        }
      }
    }
    
    .review-dialog, .query-dialog, .progress-dialog {
      width: 95% !important;
      
      .reviewers-container {
        gap: 10px;
      }
    }
    
    .progress-dialog {
      .progress-info {
        .progress-overview {
          .card.overall-progress {
            .card-content {
              .progress-summary {
                flex-direction: column;
                gap: 15px;
                
                .summary-item {
                  width: 100%;
                }
                
                .divider {
                  display: none;
                }
              }
            }
          }
        }
        
        .card.reviewer-progress {
          .card-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            
            .search-wrapper {
              width: 100%;
            }
          }
        }
      }
    }
    
    .task-assignment {
      .assignment-card {
        .assignment-form {
          .strategy-selection {
            .strategy-options {
              .el-radio-button {
                margin-bottom: 10px;
              }
            }
          }
          
          .total-papers {
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
          }
        }
      }
    }
    
    .time-settings {
      .time-form {
        max-width: 100%;
        
        .inline-form-item {
          margin-bottom: 22px;
          
          :deep(.el-form-item__label) {
            width: 110px !important;  /* 确保与formLabelWidth一致 */
            padding-right: 5px;
          }
          
          :deep(.el-form-item__content) {
            margin-left: 110px !important;
            overflow: hidden;
          }
        }
        
        .el-date-picker {
          width: 100%;
        }
        
        .el-select {
          width: 100%;
        }
      }
    }
  }
}

// 表格成功行样式
:deep(.success-row) {
  background: #f0f9eb;
}

:deep(.completed-row) {
  background-color: #f0f9eb;
}

:deep(.warning-row) {
  background-color: #fdf6ec;
}

:deep(.review-confirm-dialog) {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

:deep(.review-confirm-dialog .el-message-box__header) {
  background-color: #f2f6fc;
  padding: 15px 20px;
}

:deep(.review-confirm-dialog .el-message-box__title) {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}
  
:deep(.review-confirm-dialog .el-message-box__content) {
  padding: 20px;
  max-width: 500px;
}
  
:deep(.review-confirm-dialog .el-message-box__btns) {
  padding: 10px 20px 15px;
}

:deep(.review-confirm-dialog .el-button) {
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 14px;
  transition: all 0.3s;
}

:deep(.review-confirm-dialog .el-button:hover) {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
    
:deep(.review-confirm-dialog .el-button--primary) {
  background-color: #409EFF;
  border-color: #409EFF;
}

:deep(.review-confirm-dialog .el-button--primary:hover) {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

// 设置参考答案对话框样式
:deep(.reference-answer-dialog) {
  .el-dialog__header {
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
    margin-right: 0;
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }
  }
  
  .el-dialog__body {
    padding: 24px;
  }
  
  .el-dialog__footer {
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
  }
}

.reference-answer-container {
  .subject-item {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    padding: 20px;
    margin-bottom: 24px;
    transition: box-shadow 0.3s;
    
    &:hover {
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
    }
    
    .subject-header {
      margin-bottom: 16px;
      
      .subject-title {
        display: flex;
        align-items: center;
        
        .subject-order {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 28px;
          height: 28px;
          background-color: #409EFF;
          color: white;
          border-radius: 50%;
          font-weight: 600;
          font-size: 14px;
          margin-right: 12px;
        }
        
        .subject-name {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
        }
      }
    }
    
    .subject-content {
      padding: 12px 16px;
      background-color: #f7f8fa;
      border-radius: 4px;
      margin-bottom: 16px;
      
      p {
        margin: 0;
        line-height: 1.6;
        color: #606266;
      }
    }
    
    .reference-section, .grading-section {
      margin-bottom: 16px;
      
      .section-title {
        font-size: 14px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        
        .section-tip {
          margin-left: 12px;
          font-size: 12px;
          font-weight: normal;
          color: #909399;
        }
      }
      
      .section-content {
        padding: 12px 16px;
        background-color: #f2f6fc;
        border-radius: 4px;
        color: #606266;
        line-height: 1.6;
      }
      
      .section-input {
        margin-top: 8px;
        
        .el-textarea {
          width: 100%;
          
          :deep(.el-textarea__inner) {
            padding: 12px;
            border-color: #dcdfe6;
            border-radius: 4px;
            transition: all 0.3s;
            
            &:focus {
              border-color: #409EFF;
              box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
            }
          }
        }
      }
    }
    
    .action-section {
      display: flex;
      justify-content: flex-end;
      margin-top: 16px;
      
      .save-button {
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s;
        
        &:hover {
          transform: translateY(-2px);
        }
      }
    }
  }
}
</style> 